<template>
	<view class="container">
		<view class="bac"></view>
		<custom-tarbar :selected="2"></custom-tarbar>
		<uniNavBar name="上传作品" nextFlag="true" rightText="flase"></uniNavBar>
		<div class="box">
			<template v-if="uptype==1">
				<view class="image-name">上传图片:<text style="color:#FF0000">*</text></view>
				<view class="list">
					<view class="img-b" v-for="(item, idx) in imgList" :key="idx">
						<image class="i-img" :src="item" mode=""></image>
						<image src="../../static/close.png" class="close" mode="" @click="delImg(idx)"></image>
					</view>
					<view class="image-box">
						<view class="uploadImg" @click="upImg"><text>+</text></view>
					</view>
				</view>
				<view class="uli">
					<view class="items-flex ">
						<view>标题<text style="color:#FF0000">*</text></view>
						<view class="bot"><input type="text" v-model="title" placeholder="请输入标题" /></view>
					</view>
					<view class="items-flex textarea">
						<view>内容<text style="color:#FF0000" v-if="uptype==2">*</text></view>
						<view class="bot" style="border: none;"><textarea name="" id="" v-model="content" cols="30" rows="10" placeholder="请输入内容"></textarea></view>
					</view>
				</view>
			</template>
			<template v-if="uptype==2">
				<view class="uli">
					<view class="items-flex ">
						<view>标题<text style="color:#FF0000">*</text></view>
						<view class="bot"><input type="text" v-model="title" placeholder="请输入标题" /></view>
					</view>
					<view class="items-flex textarea">
						<view>内容<text style="color:#FF0000" v-if="uptype==2">*</text></view>
						<view class="bot" style="border: none;"><textarea name="" id="" v-model="content" cols="30" rows="10" placeholder="请输入内容"></textarea></view>
					</view>
				</view>
			</template>
			<template v-if="uptype==3">
				<view class="image-flex">
					<view class="image-name">封面地址<text style="color:#FF0000">*</text></view>
					<view class="list">
						<view class="img-b" v-for="(item, idx) in imgList" :key="idx">
							<image class="i-img" :src="item" mode=""></image>
							<image src="../../static/close.png" class="close" mode="" @click="delImg(idx)"></image>
						</view>
						<view class="image-box" v-if="!imgList.length">
							<view class="uploadImg" @click="upImg"><text>+</text></view>
						</view>
					</view>
				</view>
				<view class="image-flex">
					<view class="image-name">视频<text v-if="uptype==3" style="color:#FF0000">*</text></view>
					<view class="list">
						<view class="img-b" v-for="(item, idx) in videoList" :key="idx">
							<video :src="item" class="i-video" controls></video>
							<cover-image src="../../static/close.png" class="close2" mode="" @click="delVideo(idx)"></cover-image>
						</view>
				
						<view class="image-box" v-if="!videoList.length">
							<view class="uploadImg" @click="upVideo"><text>+</text></view>
						</view>
					</view>
				</view>
				<view class="uli">
					<view class="items-flex ">
						<view>标题<text style="color:#FF0000">*</text></view>
						<view class="bot"><input type="text" v-model="title" placeholder="请输入标题" /></view>
					</view>
					<view class="items-flex textarea">
						<view>内容<text style="color:#FF0000" v-if="uptype==2">*</text></view>
						<view class="bot" style="border: none;"><textarea name="" id="" v-model="content" cols="30" rows="10" placeholder="请输入内容"></textarea></view>
					</view>
				</view>
						
			</template>
			
		</div>
		<view class="bottom-tar"><view @click="upLoad">上传</view></view>
		<view class="alert" v-if="state">
			<view class="content">
				<image src="../../static/faguang.png" class="uimga" mode=""></image>
				<view class="topText">
					<text class="price">+10积分</text>
					<text class="infots">您的作品已上传成功！</text>
					<text class="price">现在就去看看其他人作品吧</text>
					<text class="alert-btn" @click="next">去查看作品</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import customTarbar from '@/compontents/custom-tarbar.vue';
import { activityList, post } from '@/utils/interface.js';

export default {
	components: {
		'custom-tarbar': customTarbar
	},
	data() {
		return {
			imgList: [],
			videoList: [],
			schooleList: ['一中', '二中', '三中'],
			schooleIndex: '',
			classList: [['一年级', '二年级', '三年级', '四年级'], ['一班', '二班', '三班', '四班']],
			typeList: ['分类1', '分类2', '分类3', '分类4', '分类5'],
			classIndex: '',
			text: '',
			typeIndex: '',
			state: false,
			title:"",
			content:"",
			taskId:"",
			uptype:'3'
		};
	},
	methods: {
		// 上传图片
		upImg() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					
					if (res.tempFilePaths.length) {
						uni.uploadFile({
							url: 'http://jy.yuxwl.cn/api.html', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								method: 'images.upload'
							},
							success: uploadFileRes => {
								if(uploadFileRes.status == false){
									uni.showToast({
										title:uploadFileRes.msg,
										icon:"none"
										
									})
									return false
								}
								let data = JSON.parse(uploadFileRes.data)
								console.log(data)
								that.imgList.push(data.data.url);
								console.log(that.imgList)
							}
						});
						
					}
				}
			});
		},
		// 上传视频
		upVideo() {
			var self = this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'],
				success: function(res) {
					if (res.tempFilePath) {
						uni.uploadFile({
							url: 'http://jy.yuxwl.cn/api.html', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								method: 'images.upload'
							},
							success: uploadFileRes => {
								if(uploadFileRes.status == false){
									uni.showToast({
										title:uploadFileRes.msg,
										icon:"none"
										
									})
									return false
								}
								let data = JSON.parse(uploadFileRes.data)
								console.log(data)
								self.videoList.push(data.data.url);
								console.log(self.imgList)
							}
						});
						// self.videoList.push(res.tempFilePath);
					}
				}
			});
		},
		// 删除图片
		delImg(i) {
			this.imgList.splice(i, 1);
		},
		// 删除视频
		delVideo(i) {
			this.videoList.splice(i, 1);
		},
		// 学校
		bindPickerChange(e) {
			this.schooleIndex = e.target.value;
		},
		// 班级
		bindPickerChange2(e) {
			let i = e.target.value[0];
			let j = e.target.value[1];
			this.text = this.classList[0][i] + this.classList[1][j];
		},
		// 分类
		bindPickerChange3(e) {
			this.typeIndex = e.target.value;
		},
		// 上传
		upLoad() {
			console.log("jinlia;e")
			// uni.showToast({
			// 	title:"sdjkh"
			// })
			if(this.title == ""){
				uni.showToast({
					title:"请输入标题",
					icon:"none",
				})
				return false
			}
			if(this.content == ""&&this.uptype==2){
				uni.showToast({
					title:"请输入内容",
					icon:"none"
				})
				return false
			}
			if(this.imgList.length == 0&&this.uptype==1){
				uni.showToast({
					title:"请上传图片",
					icon:"none"
				})
				return false
			}
			if(this.imgList.length == 0&&this.uptype==3){
				uni.showToast({
					title:"请上传视频封面",
					icon:"none"
				})
				return false
			}
			if(this.videoList.length == 0&&this.uptype==3){
				uni.showToast({
					title:"请上传视频",
					icon:"none"
				})
				return false
			}
			post({ method: 'activities.task_upload', token: uni.getStorageSync('userToken'), images:this.imgList.join(","),video:this.videoList.join(","),task_id: this.taskId, title: this.title, content: this.content }).then(res => {
				if(res.status == false){
					uni.showToast({
						title:res.msg,
						icon:"none"
						
					})
					return false
				}
				this.state = true;
			});
			
		},
		next() {
			this.state = false;
			uni.navigateTo({
				url: '/pages/me/display?id='+this.taskId
			});
		}
	},
	onLoad(options) {
		this.taskId = options.taskId
		// this.uptype = options.upload_type
	}
};
</script>

<style>
.alert {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
.alert .content {
	background-color: #fff;
	width: 477upx;
	height: 511upx;
	border-radius: 28upx;
	position: relative;
}
.uimga {
	display: block;
	width: 465upx;
	height: 465upx;
	margin: -196upx auto 0;
}
.price {
	color: #aaafb5;
	font-size: 28upx;
	display: block;
	text-align: center;
}
.infots {
	font-size: 34upx;
	color: #ec3f1c;
	display: block;
	text-align: center;
	margin: 40upx auto 35upx;
}
.alert-btn {
	width: 400upx;
	height: 88upx;
	background-color: #ec3f1c;
	color: #fff;
	font-size: 32upx;
	text-align: center;
	line-height: 88upx;
	border-radius: 60upx;
	display: block;
	margin: 30upx auto 0;
}
.topText {
	position: absolute;
	width: 100%;
	top: 162upx;
}
uni-picker {
	height: 100%;
	width: 400upx;
	display: flex;
	align-items: center;
}
.list {
	display: flex;
	flex-wrap: wrap;
}
.img-b {
	position: relative;
	margin-right: 30upx;
	margin-bottom: 30upx;
}
.img-b .close {
	width: 30upx;
	height: 30upx;
	position: absolute;
	top: -30upx;
	right: -30upx;
}
.img-b .close2 {
	width: 30upx;
	height: 30upx;
	position: absolute;
	top: -30upx;
	right: -30upx;
}
.i-img,
.i-video {
	width: 186upx;
	height: 186upx;
	display: block;
}
.uploadImg {
	width: 186upx;
	height: 186upx;
	background: #ececec;
	border-radius: 14upx;
	text-align: center;
	line-height: 186upx;
	font-size: 100upx;
	color: #999;
	padding: 0;
}
.bac {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(90deg, rgba(209, 0, 0, 1), rgba(253, 103, 47, 1));
	height: 220upx;
}
.uli {
	padding-bottom: 30upx;
}
.bottom-tar {
	background: #ffffff;
	text-align: center;
	line-height: 98upx;
	padding-bottom: 20upx;
	margin-top: 43upx;
}
.bottom-tar view {
	width: 710upx;
	background: linear-gradient(90deg, rgba(210, 0, 0, 1), rgba(253, 104, 47, 1));
	color: #ffffff;
	border-radius: 12upx;
	margin: auto;
	height: 72upx;
	line-height: 72upx;
	font-size: 32upx;
}
.image-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.image-box image {
	width: 186upx;
	height: 186upx;
	background: red;
	margin-right: 30upx;
}
.image-box image:nth-of-type(3n) {
	margin-right: 0;
}
.container {
	padding: 0 20upx;
}
.box {
	width: 680upx;
	box-shadow: 0 0 10upx #ddd;
	margin: auto;
	position: relative;
	background: #ffffff;
	margin-top: 88upx;

	padding: 0 20upx;
}
.image-name {
	line-height: 80upx;
	font-size: 28upx;
}

.image-box image {
	margin-bottom: 20upx;
}
.items-flex {
	display: flex;
	align-items: center;
	height: 90upx;
}
.textarea {
	height: 130upx;
	align-items: flex-start;
	padding-top: 15upx;
}
.textarea .bot {
	height: 100%;
}
.items-flex view:nth-of-type(1) {
	width: 100upx;
}

textarea {
	height: 130upx;
	flex: 1;
	width: auto;
	font-size: 28upx;
}

.items-flex view:nth-of-type(1) {
	color: #666666;
	font-size: 30upx;
}
.bot {
	border-bottom: 1upx solid #e1e1e1;
	line-height: 80upx;
	height: 80upx;
	display: flex;
	align-items: center;
	flex: 2;
}


input {
	font-size: 28upx;
	height: 100%;
	line-height: 90upx;
}
</style>
